import {StageActionRef} from "@/components/LowCodeEngine";
import {
  ArrowLeftOutlined,
  ArrowRightOutlined,
  EditOutlined,
  EyeOutlined,
  PlusCircleOutlined,
} from '@ant-design/icons';
import { ModalForm, ProFormText } from '@ant-design/pro-components';
import { request, useRequest } from '@umijs/max';
import {
  Button,
  Col,
  Dropdown,
  Flex,
  message,
  Row,
  type MenuProps,
} from 'antd';
import React from 'react';

const AddRemoteModule: React.FC<{actionRef: React.RefObject<StageActionRef>}> = ({
  actionRef,
}) => {
  const items: MenuProps['items'] = [
    {
      key: 'PLUS',
      label: 'Remote Add',
      onClick() {
        const editor = actionRef.current?.getEditor();
        if (!editor) return;

        const node = editor.query.parseReactElement(<div>6666</div>).toNodeTree();
        editor.actions.addNodeTree(node, 'ROOT');
      },
    },
  ];

  return (
    <Dropdown menu={{ items }}>
      <Button shape="circle" icon={<PlusCircleOutlined />}></Button>
    </Dropdown>
  );
};

export const Tools: React.FC<{actionRef: React.RefObject<StageActionRef>, preview?: boolean}> = ({
  preview,
  actionRef,
}) => {

  const { run: save } = useRequest(
    (data) => {
      return request('/api/template/track', {
        method: 'POST',
        data: {
          ...data,
          type: 'Template',
        },
      });
    },
    {
      manual: true,
    },
  );

  return (
    <Row
      style={{ padding: '10px 20px' }}
      justify={preview ? 'center' : 'space-between'}
      align={'middle'}
      gutter={[16, 0]}
    >
      {!preview && (
        <Col>
          <Button onClick={() => actionRef.current?.undo()}>
            <ArrowLeftOutlined />
          </Button>
          &nbsp; &nbsp; &nbsp;
          <Button onClick={() => actionRef.current?.redo()}>
            <ArrowRightOutlined />
          </Button>
        </Col>
      )}
      <Col>
        <Flex gap={'small'}>
          <Button
            shape="circle"
            icon={preview ? <EditOutlined /> : <EyeOutlined />}
            onClick={() =>
              // setOptions((options) => (options.enabled = !options.enabled))
              actionRef.current?.togglePreview()
            }
          />
          <AddRemoteModule actionRef={actionRef} />
        </Flex>
      </Col>
      {!preview && (
        <Col>
          <ModalForm
            title="保存"
            trigger={<Button type="primary">Submit</Button>}
            onFinish={async (values) => {
              await save({
                name: values.name,
                description: values.description,
                content: actionRef.current?.serialize(),
              });
              message.success('保存成功');
            }}
          >
            <ProFormText
              name={'name'}
              label="名称"
              rules={[
                {
                  required: true,
                  message: '请输入模板名称',
                },
              ]}
            />
            <ProFormText name={'description'} label="描述" />
          </ModalForm>
        </Col>
      )}
    </Row>
  );
};
